<template>

	<view class="main">


		<u-navbar :bgColor="bgColor" :fixed="false" title="员工管理" placeholder="true" @rightClick="rightClick" :autoBack="true"></u-navbar>

		<view class="info">

			<!-- 表单部分 -->
			<u--form labelWidth="100" :model="formData" :rules="rules" ref="uForm">
				<!-- <u--form labelWidth="100" :model="formData" ref="uForm"> -->

				<u-form-item label="姓名" prop="name" borderBottom>
					<u--input placeholder="请输入姓名" v-model="formData.name" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="员工号" prop="number" borderBottom>
					<u--input placeholder="请输入员工号" border="none" v-model="formData.number" type="number"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="职业" prop="position" @click="showZy=true" borderBottom>
					<u--input placeholder="请选择职业" border="none" v-model="formData.positionName"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker @cancel="showZy=false" :show="showZy" :columns="positionListData" keyName="name" @confirm="confirmZy"></u-picker>
				</u-form-item>

				<u-form-item label="医生" prop="is_doctor_name" @click="showYs=true" borderBottom>
					<u--input placeholder="请选择" border="none" v-model="formData.is_doctor_name"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker @cancel="showYs=false" :show="showYs" :columns="reservation" keyName="name" @confirm="confirmYs"></u-picker>
				</u-form-item>

				<u-form-item label="用户端宣传" prop="is_publicity_name" @click="showXc=true" borderBottom>
					<u--input placeholder="请选择" border="none" v-model="formData.is_publicity_name"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker @cancel="showXc=false" :show="showXc" :columns="yhdxcop" keyName="name" @confirm="confirmXc"></u-picker>
				</u-form-item>

				<u-form-item label="科室" prop="territoryName" @click="ksxz()" borderBottom>
					<u--input placeholder="请选择科室" border="none" v-model="formData.territoryName"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker @cancel="showKs=false" :show="showKs" :columns="TerritoryData" keyName="name" @confirm="confirmKs"></u-picker>
				</u-form-item>

				<u-form-item label="账号状态" prop="status" @click="showZt=true" borderBottom>
					<u--input placeholder="请选择" border="none" v-model="formData.status_name"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<u-picker @cancel="showZt=false" :show="showZt" :columns="zhzt" keyName="name" @confirm="confirmZt"></u-picker>
				</u-form-item>

			</u--form>

			<u-button @click="submit" :custom-style="{ backgroundColor: '#27CCBB', marginTop:'100rpx',color: '#fff', borderRadius: '40rpx', height:'80rpx'}" text="确 定"></u-button>


		</view>
	</view>

</template>

<script>
	import api_appointment from '@/api/appointment.js';
	import api_employee from '@/api/employee.js';
	import api_team from '@/api/team.js';

	export default {

		async onLoad(option) {
			this.cinfo = JSON.parse(option.info);
			this.formData.name = this.cinfo.name;
			this.formData.number = this.cinfo.number;

			this.formData.status = this.cinfo.status;
			if (this.formData.status == 1) {
				this.formData.status_name = '禁用'
			}
			if (this.formData.status == 0) {
				this.formData.status_name = '正常'
			}

			console.log('传过来的数据', this.cinfo);
		},

		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.userInfo = uni.getStorageSync('userInfo');

				this.getPositionListFuc(); //获取职位列表
				this.getTerritoryListFuc(); //获取职位列表
			}
		},

		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.uForm.setRules(this.rules)
		},


		data() {
			return {

				cinfo: null,
				positionListData: null,
				userInfo: null,
				access_token: null,
				showZy: false,
				showYs: false,
				showKs: false,
				showXc: false,
				showZt: false,

				//是否是医生
				reservation: [
					[
						{ id: 0, name: '否' },
						{ id: 1, name: '是' }
					]
				],

				//用户端宣传
				yhdxcop: [
					[
						{ id: 0, name: '否' },
						{ id: 1, name: '是' }
					]
				],

				//账号状态
				zhzt: [
					[
						{ id: 0, name: '禁用 ' },
						{ id: 1, name: '正常' }
					]
				],
				mDlistData: [], //门店列表
				TerritoryData: [], //科室列表
				longitude: 116.33,
				latitude: 40.0,
				rules: {
					number: {
						type: 'string',
						required: true,
						message: '请填写员工工号',
						trigger: ['blur', 'change']
					},


					position: {
						type: 'string',
						required: true,
						message: '请选择职业',
						trigger: ['blur', 'change']
					},
					is_doctor_name: {
						type: 'string',
						required: true,
						message: '请选择是否是医生',
						trigger: ['blur', 'change']
					},
					is_publicity_name: {
						type: 'string',
						required: true,
						message: '请选择是否在用户端宣传',
						trigger: ['blur', 'change']
					},
					territoryName: {
						type: 'string',
						required: true,
						message: '请选择科室',
						trigger: ['blur', 'change']
					},
					status_name: {
						type: 'string',
						required: true,
						message: '请选择账号状态',
						trigger: ['blur', 'change']
					},

				},
				bgColor: 'rgba(0, 31, 63, 0)',
				formData: {
					name: null,
					phone: null,
					type: null, //预约类型 1直接到店 2第三方平台预约
					typeName: null,
					store: null, //门店ID
					storeName: null, // 显示的门店名称
					territory: null,
					territoryName: null,
					arrival_at: null,
					detail: null,
					position: null,
					positionName: null,
					is_doctor: null,
					is_doctor_name: null,
					is_publicity: null,
					status: null,
					status_name: null,
				},
			};
		},
		methods: {


			ksxz() {
				this.showKs = true;
			},

			//确认职位
			confirmZy(e) {
				this.formData.position = e.value[0].id;
				this.formData.positionName = e.value[0].name;
				this.showZy = false;
				this.$refs.uForm.validateField('position', (valid) => {});
			},


			//确认医生
			confirmYs(e) {
				this.formData.is_doctor = e.value[0].id;
				this.formData.is_doctor_name = e.value[0].name;
				this.showYs = false;
				this.$refs.uForm.validateField('is_doctor_name', (valid) => {});
			},


			//确认用户端宣传
			confirmXc(e) {
				this.formData.is_publicity = e.value[0].id;
				this.formData.is_publicity_name = e.value[0].name;
				this.showXc = false;
				this.$refs.uForm.validateField('is_publicity_name', (valid) => {});
			},


			//确认用户端宣传
			confirmZt(e) {
				this.formData.status = e.value[0].id;
				this.formData.status_name = e.value[0].name;
				this.showZt = false;
				this.$refs.uForm.validateField('status_name', (valid) => {});
			},









			confirmMd(e) {
				this.formData.store = e.value[0].id;
				this.formData.storeName = e.value[0].name;
				this.showMd = false;
				this.getStoreTerritoryListFuc();
				this.$refs.uForm.validateField('store', (valid) => {});
			},





			//确认科室
			confirmKs(e) {
				this.formData.territory = e.value[0].id;
				this.formData.territoryName = e.value[0].name;
				this.showKs = false;
				this.$refs.uForm.validateField('territoryName', (valid) => {});
			},


			// 获取职位列表
			async getPositionListFuc() {

				const res = await api_team.getPositionList();
				if (res.code == 1) {
					this.positionListData = [res.data.list];
					this.formData.position = this.cinfo.position.id;
					this.formData.positionName = this.cinfo.position.name;

				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			// 获取科室列表
			async getTerritoryListFuc() {

				const res = await api_team.getTerritoryList();
				if (res.code == 1) {
					this.TerritoryData = [res.data.list];


				} else {
					this.$util.msg(res.message);
					return;
				}
			},






			submit() {
				this.$refs.uForm.validate().then(res => {
					this.addOrderFuc();
				}).catch(errors => {
					uni.$u.toast('请检查填写信息')
				})
			},

			//提交
			async addOrderFuc() {
				console.log('表单表单表单', this.formData);
				var per = {
					staff: this.cinfo.id,
					number: this.formData.number,
					position: this.formData.position,
					is_doctor: this.formData.is_doctor,
					is_publicity: this.formData.is_publicity,
					territory: this.formData.territory,
					status: this.formData.status,
				}
				if (this.formData.detail) {
					per.detail = this.formData.detail
				}
				const res = await api_team.setTeamModify(per);
				if (res.code == 1) {
					uni.$u.toast('成功')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/my/team'
						});
					}, 1000);
				} else {
					this.$util.msg(res.message);
					return;
				}
			},








		}
	};
</script>

<style scoped lang="scss">
	.main {}

	.info {
		width: 100%;

		min-height: 1000rpx;
		background: #FFFFFF;



		top: 540rpx;
		padding: 50rpx 32rpx 32rpx 32rpx;
	}


	.form-container {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.header {
		margin-bottom: 20rpx;
	}

	.xinga {
		width: 6rpx;
		height: 24rpx;
		background: #1FA194;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 10rpx;
		// margin-top: 50rpx;
	}



	.header-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #1CC09B;
	}

	.header-subtitle {
		font-size: 20rpx;
		color: #B2B2B2;
	}

	.add-person {
		font-weight: 400;
		font-size: 24rpx;
		color: #1FA194;
		margin-bottom: 10rpx;
	}

	.add-person-btn {
		margin: 20rpx 0;
		height: 146rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx dashed #1FA194;
	}

	.add-person-note {
		font-size: 20rpx;
		color: #B2B2B2;
	}

	.yybut {
		width: 622rpx !important;
		height: 180rpx !important;
		background: #27CCBB !important;
		border-radius: 40rpx 40rpx 40rpx 40rpx !important;
	}


	::v-deep .u-form-item {
		// height: 60px;
		/* 自定义高度 */
		line-height: 50px;
		/* 设置行高，使内容垂直居中 */
	}
</style>